<template>
  <div class="sci-fi-border" style="margin-top: -15px;">
    <div class="item-seven">
      <h3 style="margin-top: 50px;">-- 空气质量检测实时统计 --</h3>
      <section class="section-top">
        <div class="item">
          <el-icon size="30">
            <circle-check />
          </el-icon>
          <h5 style="margin-top: -3px;">空气质量检测总数量</h5>
          <div class="value" style="color: #2db7f5;">{{ totalCount }}</div>
        </div>
        <div class="item">
          <el-icon size="30">
            <check />
          </el-icon>
          <h5 style="margin-top: -3px;">空气质量良好数量</h5>
          <div class="value" style="color: #67c23a;">{{ goodCount }}</div>
        </div>
        <div class="item">
          <el-icon size="30">
            <Warning />
          </el-icon>
          <h5 style="margin-top: -2px;">空气质量污染数量</h5>
          <div class="value" style="color: #9D360C;">{{ pollutionCount }}</div>
        </div>
      </section>
      <section class="section-bottom">
        <div class="item">
          <div class="chart" id="chartTotal"></div>
        </div>
        <div class="item">
          <div class="chart" id="chartGood"></div>
        </div>
        <div class="item">
          <div class="chart" id="chartPollution"></div>
        </div>
      </section>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <line class="top" x1="0" y1="0" x2="100%" y2="0" />
      <line class="left" x1="0" y1="0" x2="0" y2="100%" />
      <line class="bottom" x1="0" y1="100%" x2="100%" y2="100%" />
      <line class="right" x1="100%" y1="0" x2="100%" y2="100%" />
    </svg>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';
import { CircleCheck, Check, Warning } from '@element-plus/icons-vue';

const totalCount = ref(0);
const goodCount = ref(0);
const pollutionCount = ref(0);

onMounted(async () => {
  try {
    const res = await axios.get('http://localhost:7000/service-nepm/administrator/getlevelCount');
    const result = res.data;

    totalCount.value = 0;
    goodCount.value = 0;
    pollutionCount.value = 0;

    result.forEach(item => {
      switch (item.describe) {
        case '优':
        case '良':
          goodCount.value += item.count;
          break;
        case '轻度污染':
        case '中度污染':
        case '重度污染':
        case '严重污染':
          pollutionCount.value += item.count;
          break;
        default:
          break;
      }
      totalCount.value += item.count;
    });

    initChart('总数量', totalCount.value, 'chartTotal');
    initChart('良好数量', goodCount.value, 'chartGood');
    initChart('污染数量', pollutionCount.value, 'chartPollution');
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});

const initChart = (name, value, refName) => {
  const chartDom = document.getElementById(refName);
  var myChart = echarts.init(chartDom);

  const option = {
    series: [
      {
        name: name,
        type: 'pie',
        radius: '70%',
        center: ['50%', '50%'],
        data: [
          { value: value, name: name },
          { value: totalCount.value - value, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  myChart.setOption(option);
};
</script>

<style scoped>
.item-seven {
  height: 100%;
  color: #fff;
  text-align: center;
}

h4 {
  font-size: 18px;
  color: #fff;
  margin: 0;
}

.section-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item {
  text-align: center;
  flex: 1;
  margin-top: 5%;
}

.value {
  font-size: 24px;
  font-weight: bold;
}

.section-bottom {
  display: flex;
}

.sci-fi-border {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 20px auto;
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid #2a3cad;
  color: white;
}

.sci-fi-border .item-seven {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.sci-fi-border svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sci-fi-border svg line {
  stroke-width: 3;
  stroke: #ecf0f1;
  fill: none;
  transition: all .8s ease-in-out;
}

.sci-fi-border:hover svg line {
  transition-delay: 0.1s;
}

.sci-fi-border svg line.top,
.sci-fi-border svg line.bottom {
  stroke-dasharray: 100% 240; 
}

.sci-fi-border svg line.left,
.sci-fi-border svg line.right {
  stroke-dasharray: 100% 400;
}

.sci-fi-border:hover svg line.top {
  transform: translateX(-100%);
}

.sci-fi-border:hover svg line.bottom {
  transform: translateX(100%);
}

.sci-fi-border:hover svg line.left {
  transform: translateY(100%);
}

.sci-fi-border:hover svg line.right {
  transform: translateY(-100%);
}
</style>
